<template>
	<div class="tabelContainer">
		<basic-container>
			<div>
				<el-form :inline="true" class="demo-form-inline p_form">
					<el-form-item label="项目名称:">
						<el-select placeholder="请选择所属项目" size="small" v-model="query.deptId">
							<el-option :label="item.deptName" :value="item.id" v-for="(item,index) in deptInfoList" :key="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="工号:">
						<el-input placeholder="请输入工号" size="small" v-model="query.workNum"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search" size="small" icon="el-icon-search">搜索</el-button>
						<el-button size="small" @click="cancle" icon="el-icon-delete">清空</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div>
				<el-form :inline="true" class="demo-form-inline p_form">
					<el-form-item>
						<el-button type="primary" @click="add" size="small" icon="el-icon-plus" v-if="permissionList.addBtn">新建</el-button>
						<!--<el-button type="danger"
	        	         v-if="permissionList.delBtn"
	                   size="small"
	                   plain
	                   icon="el-icon-delete"                      
	                   @click="handleDelete">删 除
	        </el-button>          			    -->
						<el-button type="success" size="small" plain icon="el-icon-upload2" @click="handleImport" v-if="permissionList.ImportBtn">导入
						</el-button>
						<el-button type="warning" size="small" plain icon="el-icon-download" v-if="permissionList.exportBtn" @click="handleExport">导出
						</el-button>

					</el-form-item>
				</el-form>
			</div>

			<avue-crud :data="data" :option="option" ref="crud" :page.sync="page" @on-load="onLoad" :table-loading="loading" @row-save="rowSave" @row-update="rowUpdate" @selection-change="selectionChange" @row-del="rowDel">
				<template slot-scope="scope" slot="menu">
					<el-button icon="el-icon-view" size="small" type="text" @click="see(scope.row)" v-if="permissionList.viewBtn">查看</el-button>
					<el-button icon="el-icon-edit" size="small" type="text" @click="edit(scope.row)" v-if="permissionList.editBtn">编辑</el-button>
				</template>

				<template slot-scope="scope" slot="profilePicForm">
					<lcUpload @success="picSuccess1" :imageUrl="profilePic"></lcUpload>
				</template>

				<template slot-scope="scope" slot="facePicForm">
					<lcUpload @success="picSuccess2" :imageUrl="facePic"></lcUpload>
				</template>
			</avue-crud>
			<el-dialog title="用户数据导入" append-to-body :visible.sync="excelBox" width="555px">
				<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter" :upload-before="beforeUpload">
					<template slot="excelTemplate">
						<el-button type="primary" @click="handleTemplate">
							点击下载<i class="el-icon-download el-icon--right"></i>
						</el-button>
					</template>
				</avue-form>
			</el-dialog>
		</basic-container>
	</div>
</template>
<script>
	import { getList, addPersonnel, updatePersonnel, getDeptInfoList, remove } from "@/api/dust/personnel";
	import { column, group } from "./option"
	import { mapGetters } from "vuex";
	import website from '@/config/website';
	import { getToken } from '@/util/auth';
	import lcUpload from "@/components/upload/upload";
	export default {
		components: {
			lcUpload
		},
		data() {
			return {
				excelBox: false, // 导入控件是否显示
				excelForm: {},
				excelOption: {
					submitBtn: false,
					emptyBtn: false,
					column: [{
							label: '模板上传',
							prop: 'excelFile',
							type: 'upload',
							drag: true,
							loadText: '模板上传中，请稍等',
							showFileList: false,
							span: 24,
							propsHttp: {
								fileName: 'multipartFile',
								res: 'data'
							},
							tip: '请上传 .xls,.xlsx 标准格式文件',
							action: "/api/squirrel-dust/staffManage/import"
						},
						{
							label: '模板下载',
							prop: 'excelTemplate',
							formslot: true,
							span: 24,
						}
					]
				},
				deptInfoList: [],
				profilePic: '',
				facePic: '',
				loading: false, // 表格请求数据的加载框
				query: {
					deptId: '',
					workNum: ''
				}, // 查询条件
				page: {
					currentPage: 1,
					total: 0,
					layout: "total,pager,prev,next",
					pageSize: this.$pageSize,
				},
				data: [],
				option: {
					header: false, // 隐藏表格头部
					align: "center",
					tip: false, // 选择控件开启后会有提示框，用不到的话需要去掉
					delBtn: true, // 控制行内删除按钮显隐
					editBtn: false,
					menuWidth: 180,
					border: true,
					selection: false,
					column: column,
					group: group
				}
			};
		},
		computed: {
			...mapGetters(["permission"]),
			permissionList() {
				return {
					addBtn: this.permission.personnel_add,
					viewBtn: this.permission.personnel_see,
					delBtn: this.permission.personnel_delete,
					editBtn: this.permission.personnel_edit,
					exportBtn: this.permission.personnel_export,
					ImportBtn: this.permission.personnel_Import
				};
			}
		},
		mounted() {
			this.option.delBtn = this.permissionList.delBtn
			this.init()
		},
		methods: {
			beforeUpload(file, done, loading) {
				var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
				const extension = testmsg === 'xls'
				const extension2 = testmsg === 'xlsx'
				if(!extension && !extension2) {
					this.$message({
						message: '请上传 .xls,.xlsx 标准格式文件!',
						type: 'warning'
					});
					loading()
				} else {
					done()
				}
			},
			uploadAfter(res, done, loading) {
				done()
				this.excelBox = false;
				this.cancle()
			},
			// 模板下载
			handleTemplate() {
				let str = this.$UploadUrl + '/squirrel/file/template/template.xlsx'
				window.open(str);
			},
			// 模板导入框出现
			handleImport() {
				this.excelBox = true;
			},
			handleExport() {
				this.$confirm("是否导出用户数据?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					let str = `/api/squirrel-dust/staffManage/export?${this.website.tokenHeader}=${getToken()}&deptId=${this.query.deptId}&workNum=${this.query.workNum}`
					window.open(str);
				});
			},
			init() {
				getDeptInfoList().then(res => {
					this.deptInfoList = res.data.data
				})
			},
			picSuccess1(url) {
				this.profilePic = url
			},
			picSuccess2(url) {
				this.facePic = url
			},
			cancle() {
				this.page.currentPage = 1;
				this.query = {
					deptId: '',
					workNum: ''
				}
				this.onLoad();
			},
			search() {
				this.page.currentPage = 1;
				this.onLoad();
			},
			see(row) {
				this.profilePic = row.profilePic
				this.facePic = row.facePic
				this.$refs.crud.rowView(row, row.$index);
			},
			edit(row) {
				this.profilePic = row.profilePic
				this.facePic = row.facePic
				this.$refs.crud.rowEdit(row, row.$index);
			},
			add() {
				this.profilePic = ''
				this.facePic = ''
				this.$refs.crud.rowAdd()
			},
			rowDel(row, index) {
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					}).then(() => {
						return remove(row.id);
					})
					.then(res => {
						let msg = res.data.data.message
						if(msg == "删除成功") {
							this.$message({
								type: "success",
								message: "操作成功!"
							});
							this.onLoad();
						} else {
							this.$message({
								type: "error",
								message: res.data.data.message
							});
						}
					});
			},
			// 新增按钮执行事件
			rowSave(row, done, loading) {
				row.facePic = this.facePic
				row.profilePic = this.profilePic
				addPersonnel(row).then(() => {
					this.onLoad();
					this.$message({
						type: "success",
						message: "操作成功!"
					});
					this.cancle()
					done();
				}, error => {
					loading();
				});
			},
			rowUpdate(row, index, done, loading) {
				row.facePic = this.facePic
				row.profilePic = this.profilePic
				updatePersonnel(row).then(() => {
					this.onLoad();
					this.$message({
						type: "success",
						message: "操作成功!"
					});
					done();
				}, error => {
					loading();
				});
			},
			onLoad() {
				this.loading = true
				let query = {
					deptId: this.query.deptId,
					workNum: this.query.workNum,
					current: this.page.currentPage,
					size: this.page.pageSize
				}
				getList(query).then(res => {
					this.loading = false
					this.page.total = res.data.data.total;
					this.data = res.data.data.records
				});
			}
		}
	}
</script>
<style scoped="" lang="scss">
	.tabelContainer {
		.el-form-item {
			margin-bottom: 8px;
		}
	}
	
	.p_form {
		width: 100%;
		margin: 0 auto;
	}
</style>